<template>
  <XForm ref="XForm" :formList="formList" :formData="formData" />
</template>

<script>
import { XForm, XUtils } from '@/components/@fhsy/x-tool'
import XFiles3 from '../components/x/XFiles3'
export default {
  components: {
    XForm,
    XFiles3
  },
  data () {
    return {
      formList: [
        { label: '活动名称',
          prop: 'name',
          rules: [{ isNull: true }, { max: 10 }],
          change: val => {
            this.formData['name'] = val.replace(/\s+/g, '')
          }
        },
        { label: '照片墙',
          prop: 'photoWall',
          type: 'XFiles2',
          change: val => {
            console.log('val', val)
          },
          action: 'http://192.168.1.243:8181/api/file/upload/',
          // action: 'http://aqbzpt.dhu.edu.cn/resources/static/put',
          rules: [
            { isNull: true }
          ],
          attrs: {
            // width: '400px',
            // height: '400px',
            resultKey: 'data',
            urlPrefix: 'http://192.168.1.243:8180',
            data: {
              id: 1
            },
            sizeMax: 5125
          }
        },
        { template: buttonOption, span: 24 }
      ],
      formData: { ffe: '独龙族' }
    }
  },
  mounted () {
    // XUtils 提供的工具类
    this.formData = XUtils.initFormData(this.formList, this.formData) // initFormData 方法是根据控件集合得到初始化数据
  }
}
let buttonOption = {
  props: ['_this'],
  template: `<div>
              <el-button type="primary" @click="onSubmit(_this)">立即创建</el-button>
              <el-button @click="reset(_this)">重 置</el-button>
            </div>`,
  methods: {
    onSubmit (_this) {
      _this.$refs['XForm'].validate(() => { // 调用 XForm 的表单校验方法
        this.$message(JSON.stringify(_this.formData))
      })
    },
    reset (_this) {
      _this.$refs['XForm'].resetFields() // 调用 XForm 的重置方法
    }
  }
}
</script>
